<template>
	<view class="index">
		<view class="search-wrapper">
			<input type="text" v-model="keywords" class="input" placeholder="输入商品名称查询" @confirm="search"
				confirm-type="search" />
			<uni-icons v-if="keywords" type="clear" @tap="keywords = ''" size="18" color="#898989"
				class="close"></uni-icons>
			<image src="https://cdpresources.hobon.cc/procurement-mini-program/static/search.png" class="icon"
				mode="widthFix"></image>
			<view class="search-btn" @click="search">
				搜索
			</view>
		</view>
		<view class="tabs-wrapper">
			<v-tabs v-model="current" @change="changeTab" :tabNumbers="tabNumbers" :tabs="tabList" :scroll="false"
				:bold="false" lineHeight="4rpx" lineColor="#F26022" activeColor="#F26022" color="#79838A"
				fontSize="30rpx"></v-tabs>
		</view>
		<view class="page-wrapper">
			<swiper class="swiper" :current="current" @change="changePage">
				<swiper-item class="swiper-item" v-for="(_swiper,i) in tabList" :key="i">
					<mescroll-item ref="mescrollItem" @getCount="getCount" :i="i" :keywords="keywords" :index="current"
						@audit="audit"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>

		<uni-popup ref="popup">
			<view class="popup-wrapper">
				<view class="popup-title-wrapper">
					<text class="title">城市仓审核</text>
				</view>
				<view class="popup-result">
					<view class="label">
						审核结果
					</view>
					<view class="popup-result-wrapper">
						<view class="popup-result-item" @tap="changeAudit('PASS')">
							<uni-icons v-if="result === 'PASS'" type="checkbox-filled" color="#F26022"
								size="22"></uni-icons>
							<uni-icons v-else type="circle" color="#ababab" size="22"></uni-icons>
							<text>通过：同意退款{{ selectItem.applyRefund }}元</text>
						</view>
						<view class="popup-result-item" @tap="changeAudit('REJECT')">
							<uni-icons v-if="result !== 'PASS'" type="checkbox-filled" color="#F26022"
								size="22"></uni-icons>
							<uni-icons v-else type="circle" color="#ababab" size="22"></uni-icons>
							<text>驳回：不同意该售后申请</text>
						</view>
					</view>
				</view>
				<view class="popup-content-wrapper">
					<view class="label-wrapper">
						<text>具体意见</text>
						<text class="small">{{ reason.length }}/100</text>
					</view>
					<textarea class="textarea" focus v-model="reason" placeholder="输入具体审核意见" maxlength="100"></textarea>
				</view>
				<view class="popup-btn-wrapper">
					<view class="btn" @click="closeAudit">
						取消本次操作
					</view>
					<view class="btn primary" @click="confirmAudit">
						提交审核
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";

	export default {
		data() {
			return {
				tabList: ['全部', '售后中', '已完成', '已拒绝'],
				tabNumbers: [],
				current: 0,
				keywords: '',
				reason: '',
				result: 'PASS',
				selectItem: {}
			}
		},
		onLoad(option) {
			this.getCount()
			if (option.type) {
				this.changePage({
					detail: {
						current: option.type
					}
				})
			}
		},
		mounted() {

		},
		methods: {
			changePage(e) {
				this.current = e.detail.current;
			},
			changeTab() {

			},
			async getCount() {
				const data = await this.$api.post('/app/after-sales/statusCount', {
					pickupPointId: this.$store.state.userInfo.pickupPointId
				}, false)
				if (data.code === 200) {
					this.tabNumbers = [0, data.data.auditing, 0, data.data.rejected]
				}
			},
			search() {
				this.$refs.mescrollItem[this.current].refresh();
			},
			refresh() {
				this.getCount()
				this.$refs.mescrollItem[this.current].refresh();
			},
			changeAudit(type) {
				this.result = type;
				if (this.result == 'PASS') {
					this.reason = "售后申请基本属实，请供应商审核处理";
				} else {
					this.reason = "客户提交的售后理由，所拍摄的图片/视频，不能完整体现出售后申请的情况，建议按照要求修改或拍摄后，重新申请";
				}
			},
			audit(data) {
				this.selectItem = {
					...data
				}
				this.reason = '';
				this.result = 'PASS';
				this.$refs.popup.open('center')
			},
			closeAudit() {
				this.$refs.popup.close();
			},
			async confirmAudit() {
				if (!this.reason && this.result !== 'PASS') {
					uni.showToast({
						title: '请输入审核意见~',
						icon: 'none'
					})
					return
				}
				const data = await this.$api.post('/app/after-sales/cityExamine', {
					result: this.result,
					opinion: this.reason,
					id: this.selectItem.id
				})
				if (data.code === 200) {
					this.closeAudit()
					this.refresh()
					uni.showToast({
						title: '已审核~'
					})
				}
			}
		},
		components: {
			MescrollItem
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: hidden;

		.search-wrapper {
			background-color: #ffffff;
			margin: 3upx 0;
			padding: 10upx 20upx;
			position: relative;
			display: flex;
			align-items: center;

			.input {
				border-radius: 10upx;
				border: 2upx solid #acacac;
				height: 70upx;
				width: 100%;
				padding: 0 120upx 0 30upx;
				box-sizing: border-box;
				font-size: 32upx;
			}

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 190upx;
				width: 26upx;
				height: 26upx;
			}

			.close {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 230upx;
			}

			.search-btn {
				width: 200upx;
				background-color: #F26022;
				color: #ffffff;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10upx;
				margin-left: 10upx;
				font-size: 28upx;
			}
		}

		.swiper {
			height: calc(100vh - 70upx);

			.nodata-wrapper {
				text-align: center;
				font-size: 32upx;
				color: #666666;

				.nodata-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 246upx;
				}

				.loading-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 296upx;
					height: 205upx;
				}
			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			width: 690upx;
			height: 600upx;
			border-radius: 20upx;
			overflow: hidden;
			position: relative;

			.popup-title-wrapper {
				text-align: center;
				position: relative;
				margin: 30upx 0;

				.title {
					font-size: 36upx;
				}

				.close {
					position: absolute;
					right: 30upx;
				}
			}

			.popup-result {
				margin: 0 30upx;
				display: flex;
				border-bottom: 1upx solid #dfdfdf;
				padding-bottom: 30upx;
				margin-bottom: 15rpx;

				.label {
					color: #212121;
					width: 150rpx;
					font-size: 32rpx;
				}

				.popup-result-wrapper {
					flex: 1;

					.popup-result-item {
						display: flex;
						align-items: center;

						&:first-child {
							margin-bottom: 10rpx;
						}
					}
				}

			}

			.popup-content-wrapper {
				margin: 20upx 30rpx;

				.label-wrapper {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					color: #212121;
					font-size: 32rpx;

					.small {
						font-size: 26rpx;
					}
				}

				.textarea {
					width: 630upx;
					height: 140upx;
					box-sizing: border-box;
				}
			}

			.popup-btn-wrapper {
				position: absolute;
				bottom: 0;
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1upx solid #efefef;

				.btn {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #212121;
					flex: 1;
					font-size: 32upx;

					&:first-child {
						border-right: 1upx solid #efefef;
					}

					&.primary {
						color: #F26022;
					}
				}
			}
		}
	}
</style>